<template>
  <img class="statusBall "
       :style="{left: left+'px',top: top+'px',border:'3px',cursor:'pointer'}"
       :src="imageSrc" :title="hint"

       @click="$emit('click')"
  />

  <!--:src="imageSrc"-->
</template>

<script>
//import BottomLeftChart from '@/components/echart/bottom/bottomLeftChart'
import stateR from '@/assets/img/state2.png'
import stateGR from '@/assets/img/state3.png'
import stateG from '@/assets/img/state1.png'
import stateY from '@/assets/img/state.png'
import {getAction} from "../../api/manage"
var curBall = null
export default {
  props: {
    equipment:{type:String},
    left: {
      default: '1'
    },
    top: {
      default: '0'
    },
    status: {
      type: String,
      default: 'g'
    },
    flash: {
      type: Boolean,
      default: false
    },
    hint: {
      type: String
    }

  },
  data() {
    return {
      imageSrc: '',
      selected:false,
      savedStatus:'',
      // 定义变量记录鼠标位置
      mouseX: 0,
      mouseY: 0,
    }
  },
  watch: {
    status: {
      handler(newData) {
        newData = newData.toUpperCase()

        switch (newData) {
          case 'R':
            this.imageSrc = stateR
            break;
          case 'G':
            this.imageSrc = stateG
            break;
          case  'GR':
            this.imageSrc=stateGR
                break
          default:
            this.imageSrc = stateY
        }
      },
      // 立即监听
      immediate: true,
      // 深度监听
      deep: true
      // ../../assets/img/state1.png"
    }
  },
  mounted() {
    this.savedStatus=this.status
    /*document.onmouseup=(event)=>{
      if (curBall){
        curBall.style.top=event.clientY+'px'
        curBall.style.left=event.clientX+'px'
        curBall=null
        return true
      }
    }*/
  },
  components: {
    //BottomLeftChart
  },
  methods: {
    handleMouseDown(event) {
      if (event)return
      /*this.selected=!this.selected
      if (this.selected){
        this.status='GR'
        curBall = event.target
      }
      else{
        this.status=this.savedStatus
        curBall = null
      }
      return  true*/
      // console.log(e);

      this.mouseX = event.clientX;
      this.mouseY = event.clientY;

      // 添加mousemove和mouseup事件
      document.onmousemove = this.dragDiv;
      document.onmouseup = this.stopDragDiv;
      curBall = event.target
    },
    // 鼠标抬起时触发的函数
    stopDragDiv() {
      // 移除mousemove和mouseup事件
      document.onmousemove = null;
      document.onmouseup = null;
      console.log(this.equipment,'cur x:'+this.mouseX,'cur y:'+this.mouseY)
      this.updatePosition()
    },
    updatePosition(){
      getAction("http://192.168.205.1:8080/api/mes.bigscreen/digital-factory/updatePosition?orgid="+this.orgid,
          {tenant_id:102,equipment: this.equipment,x:this.mouseX,y:this.mouseY-50}).then(res=>{
            if (!res.data.success){
               alert(res.data.message)
               return
            }

      })
    },
    // 鼠标移动时触发的函数
    dragDiv(event) {
      // 计算鼠标位置的变化量
      var deltaX = event.clientX - this.mouseX;
      var deltaY = event.clientY - this.mouseY;

      // 计算div的新位置
      var newTop = curBall.offsetTop + deltaY;
      var newLeft = curBall.offsetLeft + deltaX;

      // 设置div的新位置
      curBall.style.top = newTop + "px";
      curBall.style.left = newLeft + "px";

      // 更新鼠标位置
      this.mouseX = event.clientX;
      this.mouseY = event.clientY;
    }
  }
}
</script>

<style lang="scss" scoped>
.statusBall {
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: left;
  width: 20px;
  position: absolute;
  z-index: 100;
  //padding-left: 30px;
}

.statusYellow {
  background-image: url("../../assets/img/state.png");
}

.statusGreen {
  background-image: url("../../assets/img/state1.png");
}

.statusRed {
  background-image: url("../../assets/img/state2.png");
}
</style>
